<template>
  <div class="app-main" v-if="isReady">
    <div class="flex-v">
      <top-bar></top-bar>
      <div class="auto-flex app-pages">
        <Component :is="com" :ref="com"></Component>
      </div>
    </div>

    <!-- <div class="sys-dialog sys-dialog-alert">
      <div class="inner">
        <div class="sys-dialog-msg">Hello Again</div>
        <div class="sys-dialog-ctrl">
          <button tabindex="-1" class="btn btn-primary btn-confirm">确定</button>
        </div>
      </div>
    </div> -->
    <!-- <div class="sys-dialog sys-dialog-confirm">
      <div class="inner">
        <div class="sys-dialog-msg">Hello Again</div>
        <div class="sys-dialog-ctrl">
          <button tabindex="-1" class="btn btn-default btn-cancel">取消</button>
          <button tabindex="-1" class="btn btn-primary btn-confirm">确定</button>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue'
import rootData from './assets/js/root-data.js'
import rootMethods from './assets/js/root-methods.js'

const components = {}

;[
  'top-bar',
  'com-db-hub',
  'com-server',
  'com-fs',
  'com-algo',
  'com-cinema',
  'com-brain-graph',
  'com-graph',
  'com-chat',
  'com-forumn',
].forEach((name) => {
  components[name] = defineAsyncComponent(() => import(`./components/${name}/index.vue`))
})

export default {
  components,
  data() {
    return {
      isReady: false,
      ...rootData,
    }
  },
  computed: {
    r() {
      return this.$root.router
    },
    com() {
      return this.nav.map[this.r.com]?.com || this.nav.list[0].com
    }
  },
  watch: {
    router: {
      deep: true,
      handler(newVal) {
        const vm = this.$root
        const hash = '#' + JSON.stringify(newVal)
        if (hash !== decodeURIComponent(location.hash)) {
          const targetURL = location.origin + location.pathname + location.search + hash
          history[vm.isRouterPush ? 'pushState' : 'replaceState']({}, '', targetURL)
        }
        delete vm.isRouterPush
      }
    },
    ld: {
      deep: true,
      handler(newVal) {
        localStorage.ld = JSON.stringify(newVal)
      }
    },
  },
  methods: rootMethods,
  async mounted() {
    const vm = this.$root

    vm.init()
    vm.isReady = true

    // await vm.alert('are yout sure ?').then(() => {
    //   console.log('yes')
    // }).catch(() => {
    //   console.log('no')
    // })

    // await this.$alert('def', '提示')
    // await this.$alert('success', '提示', { type: 'success' })
    // await this.$alert('info', '提示', { type: 'info' })
    // await this.$alert('warning', '提示', { type: 'warning' })
    // await this.$alert('error', '提示', { type: 'error' })
    // console.log(this.$alert)
  }
}
</script>

<style lang="less" scoped>
.app-main {
  height: 100%;
  .app-pages {
    & > div {
      height: 100%;
    }
  }
}

</style>